<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>jQuery Tag Plugin - fka.dev</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <link rel="stylesheet" href="jquery.tag.css" /> 
    <script type="text/javascript" src="jquery.tag.min.js"></script>
</head>
<body>
    <h1>fka.dev - jQuery Tag Plugin v0.2</h1>
    <p>
        <a href="jquery.tag.zip">download</a>
    </p>
    Test: <em>(write something and push comma (,)) tags are unique, so you cannot rewrite a tag. try it. Try deleting tags using close icon and backspace button and move anywhere and use delete button and backspace button, try it.)</em>
    <input type="text" name="deneme" id="ffstyle" value="f,f,k,k,a,a,d,e,v" data-seperator="," />
    <p>
    You dont have to specify <code>div, ul, li</code> tags to create. You only use <code>&lt;input/&gt;.</code> tag and convert it.
    </p>
    <p>
    Example:<br />
    <code>
        &lt;input type="text" name="deneme" id="ffstyle" value="fatih, kadir, aaa  , akin, akin" data-seperator="," /&gt;
    </code>
    </p>
    <p>
        You can move around the tags using <b>up, left, down, right</b> buttons. and you can add a tag wherever you want.
        You can use "backspace" and "delete" buttons to control tags.
    </p>
    <p>
    As you see, you can define a seperator in the tag with using <code>data-seperator</code> attribute.
    <br />
    As you see again, you can define initial tags using <code>value</code> attribute! how simple!
    </p>
    <script>
        $('#ffstyle').tag({seperator: ','});
    </script>
    <br />
    You can get value simply using <code>Element.value</code> in JS or <code>$(element).val()</code> in jQuery.
    <br />
    Try jQuery:<button onclick="alert($('#ffstyle').val());">Get Value</button>
    <br />
    Code: <code>
        &lt;button onclick="alert($('#ffstyle').val());"&gt;Get Value&lt;/button&gt;
    </code>
    <br />
    Try JavaScript:<button onclick="alert(document.getElementById('ffstyle').value);">Get Value</button>
    <br />
    Code: <code>
        &lt;button onclick="alert(document.getElementById('ffstyle').value);"&gt;Get Value&lt;/button&gt;
    </code>
    <br />
    <pre>
        Default options:
        {
        seperator : ',',
            unique : true,
            addOnEnter : true,
            style : {
                list : 'taglist',
                item : 'tag',
                input : 'input',
                remove : 'delete'
            }
        }
    </pre>
    <h2>Options</h2>
    <ul>
        <li><b>seperator:</b> (string | char or charCode) which character to seperate the tags, it handles your input and applies it.</li>
        <li><b>unique:</b> (boolean | true or false) will tags be unique?</li>
        <li><b>addOnEnter:</b> (boolean | true or false) will add tags after you push enter or just seperator option?</li>
        <li><b>style</b> (object)
            <ul>
                <li><b>list:</b> (string | css class name) container class, tag is <code>ul</code></li>
                <li><b>item:</b> (string | css class name) list item class, tag is <code>li</code></li>
                <li><b>input:</b> (string | css class name) input item class, tag is <code>input</code></li>
                <li><b>remove:</b> (string | css class name) close button style, tag is <code>a</code></li>
            </ul>
        </li>
    </ul>
</body>
</html>
